<template>
    <div>
        <el-dialog :close-on-click-modal="false" class="dialog-virtual dialogList" title="设置评价模板" :visible.sync="dialogTemplate" width="740px">
            <div class="list" v-if="list.length >0">
                <el-col :span="11" class="space"  v-for="(item,index) in list"  :key="index">
                   
                        <el-input
                            type="text"
                            placeholder="请输入内容"
                            v-model="item.name"
                            maxlength="5"
                            show-word-limit
                            :rules="{ required: true, message: '内容不能为空', trigger: 'blur' }"
                        >
                        </el-input>
                            <el-tooltip class="item" effect="dark" content="注：选择默认后，评价内容默认为当前内容" placement="bottom-start">
                                <el-radio-group v-model="radio">
                                    <el-radio :label="item.id">默认</el-radio>
                                </el-radio-group>
                            </el-tooltip>
                            <div style="margin: 10px 0;"></div>
                            <el-input
                                type="textarea"
                                placeholder="请输入内容"
                                v-model="item.content"
                                maxlength="200"
                                show-word-limit
                                :rules="{ required: true, message: '内容不能为空', trigger: 'blur'}"
                            >
                        </el-input>
             
                </el-col>
                <el-button class="button-style" @click="save()" >保存模板</el-button>
            </div>
             <!-- 暂无数据 -->
            <div class="jx-mainSection-tip" v-else>
                <img src="@/assets/images/index_no_data.png" />
                <p>暂无数据</p>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { evaluation ,submitevaluation} from '@/api/Virtual';
    export default {
        data() {
            return {
                dialogTemplate:false,
                text: '',
                textarea: '',
                radio:'',
                list:[]
            }
        },

        watch: {
            // superurl(val){
            //     this.superurls = val;
            // },
        },

        created () {
            
        },
        methods:{
            init(){
                let type = 3
                evaluation(type).then((res) => {
                    console.log(res,1111)
                    this.dialogTemplate = true
                    this.list = res.data
                    let indexs = this.list.findIndex((i)=>i.selected == true)
                    this.radio = this.list[indexs].id
               
                }).catch(() => {
                   this.$message.error(res.message)
                })
            },
            save(){
            
                for(let i=0; i<this.list.length; i++){
                    this.list[i].id == this.radio ? this.list[i].selected = true : this.list[i].selected = false
                    
                }
              
                if( this.list[0].name == '' || this.list[1].name == '' || this.list[2].name == '' || this.list[3].name == '' || this.list[0].content == '' || this.list[1].content == '' || this.list[2].content == '' || this.list[3].content == ''){
                    this.$message.warning('评价模板内容和名称不能为空')
                    return
                }
                
                submitevaluation(this.list).then((res) => {
                    if(res.code == 200){
                        this.dialogTemplate = false
                        this.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                   
                        this.$emit('changeinit', true)
                    }
                }).catch(() => {
                   this.$message.error(res.message)
                })
                
            }
        }
    }
</script>

<style scoped>
    .list{
        overflow: hidden;
    }
     .el-input{
         width: auto;
     }
    .el-input >>>.el-input__inner{
        width: 200px; 
    }
    .space{
         margin-bottom: 20px;
         margin-right: 50px;
    }
    .space:nth-child(2n){
        margin-right: 0;
      
    }
    
    .button-style{
        margin: 0 auto;
        display:inherit
    }
    .el-radio__label{
        padding-left: 5px;
    }
    .el-radio>>>.el-radio__input{
        padding-left: 10px;
    }

    .jx-mainSection-tip{
        width:200px;
        text-align: center;
        position: relative;

        padding: 50px 0 50px;
        margin-bottom: 20px;
        transition: 1s;
        margin: 0 auto;
        
    }
    .jx-mainSection-tip>p{
        margin: 30px 0;
        color: #9999;
        font-size: 16px
    }
</style>
